<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<view>
				<video class="play" :src="src" :poster="mvdetail.image" :title="mvdetail.name" show-mute-btn="true"
					show-casting-button="true" show-screen-lock-button="true" ccontrols></video>
			</view>
		</view>
		<view class="">
			<u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>
			<view v-if="curNow==0" class="u-tips-color u-p-20">
				<view class="">{{mvdetail.name}}-
					<text v-for="(item,index) in mvdetail.artistName" :key="index">{{item}}
						<text v-show="mvdetail.artistName.length-1 != index">/</text></text>
				</view>
				<view class="u-font-22">发布时间：{{mvdetail.publishTime}}</view>
				<view class="u-font-22" v-if="mvdetail.desc != ''">简介：{{mvdetail.desc}}</view>
			</view>
			<view v-if="curNow==1">
				<view class="u-border u-p-10 u-font-25" v-for="(item,index) in comments" :key="index">
					<u-row>
						<u-col span="2">
							<view class="">
								<u-avatar :src="item.img"></u-avatar>
							</view>
						</u-col>
						<u-col span="10">
							<view class="u-m-l-20">
								<view class="">
									<text class="nickname">{{item.nickname}}:</text>
									<text class="content">{{item.content}}</text>
								</view>
								<view class="">
									<view class="bottom sort">{{item.time}}</view>
									<view class="bottom sort right">
										<u-icon name="thumb-up"></u-icon>
										({{item.give_like}})
									</view>
								</view>
							</view>
						</u-col>
					</u-row>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: '',
				mvdetail: {}, //介绍
				comments: [], //评论
				list: [{
						name: 'MV介绍'
					},
					{
						name: '评论'
					}
				],
				curNow: 0
			}
		},
		methods: {
			sectionChange(index) {
				this.curNow = index;
			}
		},
		onLoad(option) {
			let id = option.id;
			uni.request({
				url: "https://www.codeman.ink/api/mv/url",
				data: {
					id: id,
					r: 1080
				},
				method: 'GET',
				success: (res) => {
					this.src = res.data.data.url;
				}

			})
			uni.request({
				url: "https://www.codeman.ink/api/mv/detail",
				data: {
					mvid: id
				},
				method: 'GET',
				success: (res) => {
					// let mv = {};
					this.mvdetail.name = res.data.data.name; //歌名
					// mv.artistName = res.data.data.artistName;//
					this.mvdetail.desc = res.data.data.desc; //简介
					this.mvdetail.image = res.data.data.cover; //图片
					this.mvdetail.publishTime = res.data.data.publishTime; //发布时间
					this.mvdetail.playCount = res.data.data.playCount; //播放量
					this.mvdetail.playCount = (this.mvdetail.playCount > 10000) ? parseInt(this.mvdetail
						.playCount / 10000) + '万' : this.mvdetail.playCount;
					//歌手
					this.mvdetail.artistName = [];
					res.data.data.artists.forEach((item, index) => {
						this.mvdetail.artistName.push(item.name);
					})
					// this.mvdetail.push(mv);
					console.log(this.mvdetail);
				}
			})
			//评论
			uni.request({
				url: "https://www.codeman.ink/api/comment/mv",
				data: {
					id: id
				},
				method: 'GET',
				success: (res) => {
					// console.log(res.data.hotComments);
					res.data.hotComments.forEach((item, index) => {
						let user = {};
						user.nickname = item.user.nickname;
						user.img = item.user.avatarUrl;
						user.content = item.content;
						user.time = item.time;
						var tamp = new Date(user.time);
						var year = tamp.getFullYear();
						var month = tamp.getMonth() + 1;
						var day = tamp.getDate();
						var hours = (tamp.getHours() < 10) ? "0" + tamp.getHours() : tamp.getHours();
						var minutes = (tamp.getMinutes() < 10) ? "0" + tamp.getMinutes() : tamp
							.getMinutes();
						user.time = year + "年" + month + "月" + day + "日 " + hours + ":" + minutes;
						user.give_like = item.likedCount;
						this.comments.push(user);
					})
					console.log(this.comments);
				}
			})
		}
	}
</script>

<style>
	.play {
		width: 100%;
	}

	.nickname {
		color: #0c73c2;
	}

	.content {
		color: #7d7d94;
	}

	.bottom {
		color: #999999;
	}

	.sort {
		display: inline-block;
	}

	.right {
		float: right;
	}
</style>
